<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #img1 {
            width: 500px;
            height: 400px;
        }
    </style>
    <script>
        window.onload = function () {
            // 使图片自动切换
            // 获取img标签
            var img1 = document.getElementById("img1");
            // 创建一个数组来保存图片的路径
            var imgArr = ["./img/1.jpg", "./img/2.jpg", "./img/3.jpg", "./img/4.jpg", "./img/5.jpg"];
            // 创建一个变量，用来保存当前图片的索引
            var index = 0;
            // 获取btn01按钮
            var btn01 = document.getElementById("btn01");
            // 获取btn02按钮
            var btn02 = document.getElementById("btn02");
            // 定义一个变量，用来保存定时器的标识
            var timer;

            // 为btn01绑定一个单击响应函数
            btn01.onclick = function () {
                // 在开启定时器之前，需要把上一个定时器关闭
                clearInterval(timer);
                // 开启一个定时器，来自动切换图片
                timer = setInterval(function () {
                    // 使用索引自增
                    index++;
                    // 判断索引是否超过最大索引
                    if (index >= imgArr.length) {
                        // 则将index设置为0
                        index = 0;
                    }
                    // index = index % imgArr.length;
                    // index %= imgArr.length;
                    // 修改img1的src属性
                    img1.src = imgArr[index];
                }, 1000);
            };
            // 为btn02绑定一个单击响应函数
            btn02.onclick = function () {
                // 点击按钮以后，停止图片的自动切换，关闭定时器
                clearInterval(timer);
            };

        };
    </script>
</head>

<body>
    <img src="./img/1.jpg" id="img1">
    <br>
    <button id="btn01">开始</button>
    <button id="btn02">停止</button>
</body>

</html>